<template>
  <div class="tabber">
    <span v-for="(item,index) in list" :key="index" :class="{active: currentIndex == index}" @click="handlerClick(index)">{{item}}</span>
    <!-- <span>爆爆团</span>
    <span>订单</span>
    <span>我的</span> -->
  </div>
</template>

<script>
export default {
    data(){
        return {
            currentIndex:0,
            list:['首页','订单','我的']
        }
    },
     methods: {
    handlerClick(index) {
      this.currentIndex = index;
    }
  }
}
</script>

<style>
.tabber {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  bottom: 0%;
}
.tabber span.active {
  color: skyblue;
}
</style>